<script setup>
import { GlobalOutlined } from '@ant-design/icons-vue';
</script>

<template>
  <div class="userLogin">
    <!-- 语言 -->
    <div class="language">
      <i>
        <GlobalOutlined />
      </i>
    </div>
    <div class="login">
      <!-- 头部 -->
      <div class="top">
        <div>
          <img src="https://preview.pro.antdv.com/assets/logo.b617e17f.svg" alt="" width="44px"
            style="margin-right: 20px;">
          <h1>
            <strong>Ant Design</strong>
          </h1>
        </div>
        <p>Ant Design 是西湖区最具影响力的 Web 设计规范</p>
      </div>
      <!-- 主体 -->
      <slot></slot>
      <!-- 底部 -->
      <div class="footer" style="font-size: 14px;color: #00000073;text-align: center;">
        <p style="width: 210px;display: flex;justify-content: space-around;margin: 0 auto;margin-bottom: 10px;">
          <a>帮助</a>
          <a>隐私</a>
          <a>条款</a>
        </p>
        <p>Copyright © 2018 vueComponent</p>
      </div>
    </div>

  </div>
</template>
<style scoped lang="less">
.userLogin {
  background: #f0f2f5 url(https://preview.pro.antdv.com/assets/background.ebcb9160.svg) no-repeat 50%;
  height: 100%;

  // 语言
  .language {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: end;
    padding-right: 30px;
    color: #555555;
    margin-bottom: 30px;

    i {
      width: 14px;
    }
  }

  .login {
    max-width: 368px;
    margin: 0 auto;

    // 头
    .top {
      margin-bottom: 40px;
      text-align: center;

      div {
        display: flex;
        justify-content: center;
        height: 55px;
        line-height: 55px;
        margin-bottom: 10px;
      }

      p {
        font-size: 14px;
        color: rgb(150, 150, 150);
      }
    }
  }
}
</style>
;
